<!--
 * @Author: Blake He
 * @Date: 2023-08-22 13:58:17
 * @Description: 产品广告轮播 swiper地址：https://swiperjs.com/demos#pagination
 * @LastEditTime: 2023-08-31 13:46:52
 * @LastEditors: yuyang
-->

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { Swiper, SwiperSlide } from 'swiper/vue'
// Import Swiper styles
import 'swiper/css'
import 'swiper/css/pagination'
// import required modules
import { Autoplay, Pagination, Navigation } from 'swiper/modules'
// icons
import AI from '@/assets/images/icons/AI-icon.png'
import SCRM from '@/assets/images/icons/SCRM-icon.png'
import HKB from '@/assets/images/icons/HKB-icon.png'
import XMTYL from '@/assets/images/icons/XMTYL-icon.png'
import QDB from '@/assets/images/icons/QDB-icon.png'
import JDYP from '@/assets/images/icons/JDYP-icon.png'
import ESHS from '@/assets/images/icons/ESHS-icon.png'
import SYT from '@/assets/images/icons/SYT-icon.png'
import JSKP from '@/assets/images/icons/JSKP-icon.png'
import DZFJP from '@/assets/images/icons/DZFJP-icon.png'
import Message from '@/assets/images/icons/message-icon.png'

const modules = [Autoplay, Pagination, Navigation]
//这个是swiper的实例对象
let controlledSwiper = ref({}) as any
const pagination = ref({
  el: '.my-pagination',
  bulletClass: 'my-bullet',
  bulletActiveClass: 'my-bullet-active',
  // 此参数设置为true时，点击分页器的指示点分页器会控制Swiper切换。
  clickable: true,
  renderBullet: function (index: any, className: any) {
    const icons = [
      { url: AI, title: '酒店AI经理' },
      { url: SCRM, title: 'SCRM社会</br>化营销系统' },
      { url: HKB, title: '获客宝' },
      { url: XMTYL, title: '新媒体引流' },
      { url: QDB, title: '抢单宝' },
      { url: JDYP, title: '酒店用品' },
      { url: ESHS, title: '二手回收' },
      { url: SYT, title: '收银台' },
      { url: JSKP, title: '极速开票' },
      { url: DZFJP, title: '电子房价牌' },
      { url: Message, title: '营销短信</br>助手' }
    ]
    // <div class='icon icon-${index + 1}'><img src='${icons[index].url}' width='54' heigh='54' /></div>
    return `<div class='icons my-bullet ${className}' onmousemove="select(${index})">
        <div class='icon'><div class='icon-${index + 1}'></div></div>
        <div class='title'>${icons[index].title}</div><div class='selected'></div>
        </div>`
  }
  // 这个属性是将分页器样式设置为自定义
  //   type: 'custom',
  //   renderCustom: function (swiper: any, current: any, total: any) {
  //     console.log(swiper, 'swiper')
  //     var paginationHtml = ''
  //     var text = ['2021', '2022', '2023']
  //     for (let i = 0; i < total; i++) {
  //       if (i == current) {
  //         paginationHtml += `<span class='pagination_text swiper-pagination-bullet swiper-pagination-bullet-active'>${
  //           text[i - 1]
  //         }</span>`
  //       } else {
  //         paginationHtml += `<span class='pagination_text swiper-pagination-bullet'>${text[i - 1]}</span>`
  //       }
  //     }
  //     return paginationHtml
  //   }
})
const onSwiper = (swiper: any) => {
  console.log(swiper)
  controlledSwiper.value = swiper
}
const onSlideChange = (e: any) => {
  // swiper切换的时候执行的方法
  console.log('slide change', e.activeIndex)
}

const select = (index: number) => {
  console.log(controlledSwiper, 'controlledSwiper', index)
}

onMounted(() => {
  window.select = select
})
</script>

<template>
  <div class="my-pagination"></div>
  <div class="my-swiper">
    <swiper
      :modules="modules"
      :autoplay="{
        delay: 3000,
        disableOnInteraction: false,
        pauseOnMouseEnter: true
      }"
      :loop="true"
      :pagination="pagination"
      @swiper="onSwiper"
      @slideChange="onSlideChange"
    >
      <swiper-slide><img src="@/assets/images/banner/AI.png" alt="酒店AI经理" /></swiper-slide>
      <swiper-slide><img src="@/assets/images/banner/SCRM.png" alt="SCRM社会 化营销系统" /></swiper-slide>
      <swiper-slide><img src="@/assets/images/banner/HKB.png" alt="获客宝" /></swiper-slide>
      <swiper-slide><img src="@/assets/images/banner/XMTYL.png" alt="新媒体引流" /></swiper-slide>
      <swiper-slide><img src="@/assets/images/banner/QDB.png" alt="抢单宝" /></swiper-slide>
      <swiper-slide><img src="@/assets/images/banner/JDYP.png" alt="酒店用品" /></swiper-slide>
      <swiper-slide><img src="@/assets/images/banner/ESHS.png" alt="二手回收" /></swiper-slide>
      <swiper-slide><img src="@/assets/images/banner/SYT.png" alt="收银台" /></swiper-slide>
      <swiper-slide><img src="@/assets/images/banner/JSKP.png" alt="极速开票" /></swiper-slide>
      <swiper-slide><img src="@/assets/images/banner/DZFJP.png" alt="电子房价牌" /></swiper-slide>
      <swiper-slide><img src="@/assets/images/banner/message.png" alt="营销短信助手" /></swiper-slide>
    </swiper>
  </div>
</template>

<style lang="scss" scoped>
.my-swiper {
  padding-top: 30px;
  max-height: 457px;
  :deep(.swiper) {
    width: 100%;
    height: 100%;
    .swiper-slide {
      text-align: center;
      font-size: 18px;
      background: #fff;
      /* Center slide text vertically */
      display: flex;
      justify-content: center;
      align-items: center;
    }

    .swiper-slide img {
      display: block;
      width: 100%;
      height: 100%;
      border-radius: 6px;
      box-sizing: border-box;
    }
  }
}
</style>

<style lang="scss">
.my-pagination {
  padding-top: 20px;
  display: flex;
  justify-content: center;
  align-items: center;

  .icons {
    display: flex;
    align-items: center;
    flex-direction: column;
    width: 100px;
    height: 100%;
    .title {
      height: 14px;
      //   width: 60px;
      font-size: 12px;
      font-family: PingFang-SC-Medium, PingFang-SC;
      font-weight: 500;
      color: #333333;
      line-height: 14px;
      margin-top: 16px;
    }
  }

  .my-bullet {
    .selected {
      width: 14px;
      height: 14px;
      text-align: center;
      line-height: 14px;
      font-size: 12px;
      color: #000;
      opacity: 1;
      background: rgba(0, 0, 0, 0);
      margin-top: 20px;
    }
  }

  .my-bullet-active {
    .title {
      font-weight: 600;
      color: #333333;
    }
    .selected {
      color: #fff;
      background: #4a7ec3;
      border-radius: 10px;
    }
  }

  .icon {
    width: 66px;
    height: 66px;
    display: flex;
    justify-content: center;
    align-items: center;
    & > div {
      width: 54px;
      height: 54px;
      transition: all 0.4s;
    }
  }
  .icon > div:hover,
  .my-bullet-active > .icon > div {
    width: 66px;
    height: 66px;
    background-size: 110% 110%;
  }

  .icon-1 {
    background: url('@/assets/images/icons/AI-icon.png') no-repeat;
    background-position: center; /* 是为了让图片放大的时候从中部放大，不会偏移 */
    background-size: 100% 100%;
  }
  .icon-2 {
    background: url('@/assets/images/icons/SCRM-icon.png') no-repeat;
    background-position: center;
    background-size: 100% 100%;
  }
  .icon-3 {
    background: url('@/assets/images/icons/HKB-icon.png');
    background-position: center;
    background-size: 100% 100%;
  }
  .icon-4 {
    background: url('@/assets/images/icons/XMTYL-icon.png');
    background-position: center;
    background-size: 100% 100%;
  }
  .icon-5 {
    background: url('@/assets/images/icons/QDB-icon.png');
    background-position: center;
    background-size: 100% 100%;
  }
  .icon-6 {
    background: url('@/assets/images/icons/JDYP-icon.png');
    background-position: center;
    background-size: 100% 100%;
  }
  .icon-7 {
    background: url('@/assets/images/icons/ESHS-icon.png');
    background-position: center;
    background-size: 100% 100%;
  }
  .icon-8 {
    background: url('@/assets/images/icons/SYT-icon.png');
    background-position: center;
    background-size: 100% 100%;
  }
  .icon-9 {
    background: url('@/assets/images/icons/JSKP-icon.png');
    background-position: center;
    background-size: 100% 100%;
  }
  .icon-10 {
    background: url('@/assets/images/icons/DZFJP-icon.png');
    background-position: center;
    background-size: 100% 100%;
  }
  .icon-11 {
    background: url('@/assets/images/icons/message-icon.png');
    background-position: center;
    background-size: 100% 100%;
  }
}
</style>
